<!--
 * @Date: 2022-02-11 15:47:51
 * @Author: 陶子
 * @LastEditTime: 2023-07-06 11:24:51
 * @FilePath: \jk_one-stop_pc\src\pubComponent\SetColumn.vue
 * @pageName: 这是--(公共组件——设置列)--页面
-->
<template>
  <div class="columnRoot">
    <a-modal v-model="visible" :title="columnName" @ok="handleOk" @cancel="handleCancel" :width="800">
      <div class="containerBox">
        <div class="containerLeft">
          <div class="topBox">
            <div class="topLeft">可选列</div>
          </div>
          <div class="botBox">
            <div class="itemTop">
              <a-checkbox :indeterminate="colunmArr.indeterminate" :checked="colunmArr.checkAll" @change="onCheckAllChange">{{colunmArr.topTitle}}</a-checkbox>
            </div>
            <div class="itemBox">
              <a-checkbox-group v-model="colunmArr.checkedList" :options="colunmArr.plainOptions" @change="onChange">
                <a-tooltip slot="label" slot-scope="option">
                  <template slot="title">
                    {{ option.title}}
                  </template>
                  <span>{{ option.title }}</span>
                </a-tooltip>
              </a-checkbox-group>
            </div>
          </div>
        </div>
        <div class="middleLine"></div>
        <div class="containerRight">
          <div class="rightTop">已选择</div>
          <div class="rightSelect">
            <draggable v-model="mySelectArr" chosen-class="chosen" force-fallback="true" handle=".itemLeft" group="currentClass" animation="800" @start="onStart"
              @end="onEnd">
              <transition-group type="transition" :name="!drag ? 'flip-list' : null">
                <div class="itemChecked" v-for="(item,index) in mySelectArr" :key="index+'index'">
                  <div class="itemLeft">
                    <img src="~@/assets/img/before.png" alt="logo" class="beforePng">
                    <div class="text" :style="{color:item.isLock?'rgba(0, 0, 0, 0.25)':''}">{{item.title}}</div>
                  </div>
                  <div class='itemRight'>
                    <img src="~@/assets/img/clock.png" alt="" class='clockPng' @click="lockItem(item,index,'mySelectArr')">
                    <img src="~@/assets/img/lockTrue.png" class='LockPng' v-if="item.isLock" alt="">
                    <img src="~@/assets/img/delete.png" alt="" @click="delectItem(item,'colunmArr','mySelectArr')" class='deletePng'>
                  </div>
                </div>
              </transition-group>
            </draggable>
          </div>
        </div>
      </div>
    </a-modal>
  </div>
</template>
<script>
import draggable from 'vuedraggable'
export default {
  props: {
    columnName: {
      type: String,
      default: '设置列',
    },
    showSearch: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      visible: false,
      mySelectArr: [],
      colunmArr: [],
      drag: false,
      colunmArrFormData: {
        checkAll: false, //当前组是否全选
        indeterminate: false, //当前组不全选且有选择项时显示状态
        checkedList: ['1', '2', '3', '4', '5'], //已选数据（不包括所有属性，只含有所选项的每一项的value）
        selectList: [], //已选数据（包括所有属性）
        topTitle: '基础字段', //当前组顶部字段
        plainOptions: [
          //当前组提供可供选择的选项
          { title: '订单编号', value: '1', isLock: false },
        ],
      },
      firstColumn: null
    }
  },
  components: {
    draggable,
  },
  methods: {
    onStart() {
      this.drag = true
    },
    onEnd() {
      this.drag = false
      console.log('结束了：', this.mySelectArr)
    },
    paramsData(allColumn, sessionKey, columns, noAction) {
      console.log(allColumn, sessionKey, columns, noAction,'allColumn, sessionKey, columns, noAction')
      this.colunmArrFormData.plainOptions = []
      for (let t = 0; t < allColumn.length; t++) {
        let item = allColumn[t]
        let obj = {
          title: item.title,
          value: item.dataIndex,
          number: t + 1,
          isLock: item.fixed ? true : false,
          width: item.width ? item.width : 120
        }
        if (!item.firstOnly) {
          this.colunmArrFormData.plainOptions.push(obj)
        } else {
          this.firstColumn = obj
        }
        // this.colunmArrFormData.plainOptions.push(obj)
      }

      let oldValue = localStorage.getItem(sessionKey)
      if (oldValue) {
        let oldArr = JSON.parse(oldValue)
        let checkArr = []
        let selectArr = []
        for (let j = 0; j < oldArr.length; j++) {
          const old = oldArr[j]
          for (let i = 0; i < this.colunmArrFormData.plainOptions.length; i++) {
            const ops = this.colunmArrFormData.plainOptions[i]
            if (ops.value == old.value) {
              this.colunmArrFormData.plainOptions[i].isLock = old.isLock
              checkArr.push(old.value)
              selectArr.push(old)
            }
          }
        }
        this.colunmArrFormData.checkAll = checkArr.length == this.colunmArrFormData.plainOptions.length
        if (checkArr.length == this.colunmArrFormData.plainOptions.length) {
          this.colunmArrFormData.indeterminate = false
        } else {
          if (checkArr.length == 0) {
            this.colunmArrFormData.indeterminate = false
          } else {
            this.colunmArrFormData.indeterminate = true
          }
        }
        this.colunmArrFormData.checkedList = checkArr
        this.colunmArrFormData.selectList = selectArr

        this.$nextTick(() => {
          this.showModal(this.colunmArrFormData)
        })
        return
      }
      let columnLength = null
      if (noAction) {
        columnLength = columns.length
      } else {
        columnLength = columns.length - 1
      }
      if (this.colunmArrFormData.plainOptions.length == columnLength) {
        this.colunmArrFormData.checkAll = true
        this.colunmArrFormData.indeterminate = false
        this.colunmArrFormData.checkedList = []
        this.colunmArrFormData.selectList = []

        for (let item of this.colunmArrFormData.plainOptions) {
          this.colunmArrFormData.checkedList.push(item.value)
          this.colunmArrFormData.selectList.push(item)
        }
        console.log('1', this.colunmArrFormData.checkedList)
      } else {
        if (columnLength == 0) {
          this.colunmArrFormData.checkAll = false
          this.colunmArrFormData.indeterminate = false
          this.colunmArrFormData.checkedList = []
          this.colunmArrFormData.selectList = []
          console.log('2', this.colunmArrFormData.checkedList)
        } else {
          this.colunmArrFormData.checkAll = false
          this.colunmArrFormData.indeterminate = true
          this.colunmArrFormData.checkedList = []
          this.colunmArrFormData.selectList = []
          let otherArr = JSON.parse(JSON.stringify(columns))
          otherArr = otherArr.filter((item) => item.title != '操作')
          for (let y = 0; y < otherArr.length; y++) {
            let item = otherArr[y]
            let obj = {
              title: item.title,
              value: item.dataIndex,
              number: y + 1,
              isLock: item.fixed ? true : false,
              width: item.width ? item.width : 120
            }
            if (!item.firstOnly) {
              this.colunmArrFormData.checkedList.push(item.dataIndex)
              this.colunmArrFormData.selectList.push(obj)
            }
            // this.colunmArrFormData.checkedList.push(item.dataIndex)
            // this.colunmArrFormData.selectList.push(obj)
          }
          console.log('3', this.colunmArrFormData.checkedList)
        }
      }
      this.$nextTick(() => {
        this.showModal(this.colunmArrFormData)
        this.onChange(this.colunmArrFormData.checkedList)  // 初始化第一次打开设置列的时候，默认全选的情况复选框没有全选
      })

    },
    showModal(colunmArr) {
      console.log('colunmArr',colunmArr)
      this.colunmArr = JSON.parse(JSON.stringify(colunmArr))
      this.mySelectArr = []
      this.mySelectArr = this.colunmArr.selectList
      this.visible = true
    },
    handleOk() {
      let emitArr = []
      emitArr = JSON.parse(JSON.stringify(this.mySelectArr))
      if (this.firstColumn) {
        emitArr.unshift(this.firstColumn)
      }
      this.$emit('sureBtn', emitArr)
      this.handleCancel()
    },
    handleCancel() {
      this.visible = false
      this.$emit('cancelBtn')
    },
    // 单选功能
    onChange(checkedList) {
      this.colunmArr.indeterminate = !!checkedList.length && checkedList.length < this.colunmArr.plainOptions.length
      this.colunmArr.checkAll = checkedList.length === this.colunmArr.plainOptions.length
      this.colunmArr.selectList = []
      for (let item of this.colunmArr.plainOptions) {
        for (let each of checkedList) {
          if (item.value == each) {
            this.colunmArr.selectList.push(item)
          }
        }
      }
      let addArr = JSON.parse(JSON.stringify(this.colunmArr.selectList))
      for (let tag of this.mySelectArr) {
        addArr = addArr.filter((node) => node.value != tag.value)
      }
      let ruduceArr = JSON.parse(JSON.stringify(this.mySelectArr))
      for (let each of this.colunmArr.selectList) {
        ruduceArr = ruduceArr.filter((node) => node.value != each.value)
      }
      for (let item of ruduceArr) {
        this.mySelectArr = this.mySelectArr.filter((node) => node.value != item.value)
      }
      let newArrData = JSON.parse(JSON.stringify(this.mySelectArr))

      if (this.mySelectArr.length > 0) {
        for (let item of addArr) {
          let checkArr = JSON.parse(JSON.stringify(this.mySelectArr))
          checkArr.sort((a, b) => {
            return Math.abs(a.number - item.number) - Math.abs(b.number - item.number)
          })
          let currentItem = checkArr[0]
          let currentIdex = null
          let checkValue = item.number - checkArr[0].number
          for (let i = 0; i < this.mySelectArr.length; i++) {
            if (this.mySelectArr[i].value == currentItem.value) {
              currentIdex = i
            }
          }
          if (checkValue > 0) {
            newArrData.splice(currentIdex + 1, 0, item)
          } else {
            newArrData.splice(currentIdex, 0, item)
          }
        }
        this.mySelectArr = []
        this.mySelectArr = this.mySelectArr.concat(newArrData)
      } else {
        this.mySelectArr = []
        this.mySelectArr = this.mySelectArr.concat(this.colunmArr.selectList)
      }
    },

    // 全选功能
    onCheckAllChange(e) {
      this.colunmArr.selectList = e.target.checked ? this.colunmArr.plainOptions : []
      this.colunmArr.indeterminate = false
      this.colunmArr.checkAll = e.target.checked
      this.colunmArr.checkedList = []
      for (let item of this.colunmArr.selectList) {
        this.colunmArr.checkedList.push(item.value)
      }
      // let addArr = JSON.parse(JSON.stringify(this.colunmArr.selectList))
      // for (let tag of this.mySelectArr) {
      //   addArr = addArr.filter((node) => node.value != tag.value)
      // }
      // let ruduceArr = JSON.parse(JSON.stringify(this.mySelectArr))
      // for (let each of this.colunmArr.selectList) {
      //   ruduceArr = ruduceArr.filter((node) => node.value != each.value)
      // }
      // for (let item of ruduceArr) {
      //   this.mySelectArr = this.mySelectArr.filter((node) => node.value != item.value)
      // }
      // let newArrData = JSON.parse(JSON.stringify(this.mySelectArr))

      // if (this.mySelectArr.length > 0) {
      //   for (let item of addArr) {
      //     let checkArr = JSON.parse(JSON.stringify(this.mySelectArr))
      //     checkArr.sort((a, b) => {
      //       return Math.abs(a.number - item.number) - Math.abs(b.number - item.number)
      //     })
      //     let currentItem = checkArr[0]
      //     let currentIdex = null
      //     let checkValue = item.number - checkArr[0].number
      //     for (let i = 0; i < this.mySelectArr.length; i++) {
      //       if (this.mySelectArr[i].value == currentItem.value) {
      //         currentIdex = i
      //       }
      //     }
      //     if (checkValue > 0) {
      //       newArrData.splice(currentIdex + 1, 0, item)
      //     } else {
      //       newArrData.splice(currentIdex, 0, item)
      //     }
      //   }
      //   this.mySelectArr = []
      //   this.mySelectArr = this.mySelectArr.concat(newArrData)
      // } else {
      //   this.mySelectArr = []
      //   this.mySelectArr = this.mySelectArr.concat(this.colunmArr.selectList)
      // }
      this.mySelectArr = []
      this.mySelectArr = this.mySelectArr.concat(this.colunmArr.selectList)
    },

    delectItem(item, parentName, sonName) {
      this[sonName] = this[sonName].filter((each) => {
        return each.value != item.value
      })

      for (let j = 0; j < this[parentName].selectList.length; j++) {
        if (this[parentName].selectList[j].value == item.value) {
          this[parentName].selectList = this[parentName].selectList.filter((tag) => {
            return tag.value != item.value
          })
          this[parentName].checkedList = this[parentName].checkedList.filter((tag) => {
            return tag != item.value
          })
          if (this[parentName].checkedList.length > 0) {
            this[parentName].checkAll = false
            this[parentName].indeterminate = true
          } else {
            this[parentName].checkAll = false
            this[parentName].indeterminate = false
          }
        }
      }
    },

    lockItem(item, index, sonName) {
      this[sonName][index].isLock = !item.isLock
    },
  },
}
</script>
<style lang="less" scoped>
.flex(@jc,@ai,@fd:row) {
  display: flex;
  justify-content: @jc;
  align-items: @ai;
  flex-direction: @fd;
}
div.containerBox {
  .flex(flex-start, flex-start);
  position: relative;
  div.containerLeft {
    flex: 2;
    box-sizing: border-box;
    padding: 16px 24px;
    div.topBox {
      .flex(space-between, center);
      margin-bottom: 24px;
      div.topLeft {
        font-size: 14px;
        color: #888888;
      }
    }

    div.botBox {
      margin-bottom: 24px;
      &:nth-last-child(1) {
        margin-bottom: 0;
      }
      div.itemTop {
        margin-bottom: 18px;
        // a-checkbox {
        // }
      }

      // div.itemBox {
      //   a-checkbox-group {
      //     span {
      //     }
      //   }
      // }
    }
  }
  .middleLine {
    position: absolute;
    width: 1px;
    background-color: #e8e8e8;
    right: 250px;
    height: 100%;
  }
  div.containerRight {
    flex: 1;
    box-sizing: border-box;
    padding: 22px 0 16px 0;
    div.rightTop {
      font-size: 14px;
      color: #888888;
      box-sizing: border-box;
      padding: 0 21px 0 24px;
    }

    div.rightSelect {
      overflow: auto;
      max-height: 50vh;
      div.itemChecked {
        .flex(space-between, center);
        box-sizing: border-box;
        padding: 9px 24px;
        .itemLeft {
          .flex(flex-start, center);
          cursor: move;
        }
        .itemRight {
          .flex(flex-end, center);
        }
        img.beforePng {
          width: 10px;
          height: 14px;
        }

        div.text {
          font-size: 14px;
          color: #191f25;
          flex: 1;
          width: 145px;
          margin: 0 5px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }

        img.clockPng {
          width: 12px;
          height: 12px;
          margin-right: 5px;
          display: none;
        }
        .LockPng {
          width: 12px;
          height: 12px;
          margin-right: 5px;
        }
        img.deletePng {
          width: 12px;
          height: 12px;
        }
        &:hover .clockPng {
          display: inline-block;
        }
        &:hover .LockPng {
          display: none;
        }
        &:hover {
          background: #f5f8ff;
        }
      }
    }
  }
}
/deep/ .ant-modal-body {
  padding: 0px 0px !important;
}
/deep/ .ant-checkbox-group-item {
  font-size: 14px;
  color: #191f25;
  width: 100px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-right: 24px;
}
.flip-list-move {
  transition: transform 0.5s;
}
.no-move {
  transition: transform 0s;
}
</style>

